<template>
  <el-dialog
    v-bind.sync="$attrs"
    destroy-on-close
    :before-close="cancel"
    :visible.sync="isShowAddGoods"
  >
    <el-form
      ref="elForm_goods"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item label="商品类型" prop="goodsType">
        <el-radio-group v-model.number="formData.goodsType" size="medium">
          <el-radio
            v-for="(item, index) in dict.type.activity_goodsType"
            @change="goodsTypeChange"
            :key="index"
            :label="parseInt(item.value)"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <!-- 优惠券 -->
      <el-form-item
        label="选择优惠券"
        prop="businessId"
        v-if="formData.goodsType == 1"
      >
        <el-select
          v-model="formData.businessId"
          @change="businessIdChange"
          placeholder="请选择优惠券"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="item in businessIdOptions"
            :key="item.businessId"
            :label="item.couponName"
            :value="item.businessId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="goodsServerName">
        <el-input
          v-model.trim="formData.goodsServerName"
          :disabled="formData.goodsType == 1"
          placeholder="请输入名称"
          :maxlength="50"
          show-word-limit
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="价值" prop="goodsServerPrice">
        <el-input
          v-model="formData.goodsServerPrice"
          :disabled="formData.goodsType == 1"
          placeholder="请输入价值"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        :label="formData.goodsType == 1 ? '数量/张' : '数量'"
        prop="goodsServerNumber"
      >
        <el-input
          v-model="formData.goodsServerNumber"
          :placeholder="
            formData.goodsType == 1 ? '请输入优惠券数量' : '请输入数量'
          "
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="说明" prop="goodsServerDescribe">
        <el-input
          v-model.trim="formData.goodsServerDescribe"
          type="textarea"
          placeholder="请输入说明"
          :maxlength="200"
          show-word-limit
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { couponBusActivityList } from '@/api/activity/seckill'
export default {
  components: {},
  props: [],
  dicts: ['activity_goodsType'],
  data() {
    return {
      //新增与编辑标识
      index: null,
      //优惠券列表数据
      businessIdOptions: [],
      isShowAddGoods: false,
      formData: {
        goodsType: 1,
        businessId: null,
        businessName: null,
        goodsServerName: '',
        goodsServerPrice: null,
        goodsServerNumber: null,
        goodsServerDescribe: null,
      },
      rules: {
        goodsType: [
          {
            required: true,
            message: '请选择商品类型',
            trigger: 'change',
          },
        ],
        businessId: [
          {
            required: true,
            message: '请选择优惠券',
            trigger: 'change',
          },
        ],
        goodsServerName: [
          {
            required: false,
            message: '请输入商品实物名称',
            trigger: 'blur',
          },
        ],
        goodsServerPrice: [
          {
            required: false,
            message: '请输入价值',
            trigger: 'blur',
          },
          {
            required: false,
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '价值为正数，且保留两位小数',
            trigger: 'blur',
          },
        ],
        goodsServerNumber: [
          {
            required: true,
            message: '请输入数量',
            trigger: 'blur',
          },
          {
            pattern: /^([1-9]\d*)$/,
            message: '只能输入正整数',
            trigger: 'change',
          },
        ],
        goodsServerDescribe: [
          {
            required: true,
            message: '请输入商品服务描述',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {},
  mounted() {},
  methods: {
    goodsTypeChange(val) {
      this.formData = {
        goodsType: val,
        businessId: null,
        businessName: null,
        goodsServerName: '',
        goodsServerPrice: null,
        goodsServerNumber: null,
        goodsServerDescribe: null,
      }
      if (val === 2) {
        this.rules.goodsServerName[0].required = true
        this.rules.goodsServerPrice[0].required = true
      } else {
        this.rules.goodsServerName[0].required = false
        this.rules.goodsServerPrice[0].required = false
        this.$refs['elForm_goods'].resetFields('goodsServerName')
        this.$refs['elForm_goods'].resetFields('goodsServerPrice')
      }
    },
    businessIdChange(val) {
      if (this.formData.goodsType == 1) {
        this.rules.goodsServerName[0].required = false
        this.rules.goodsServerPrice[0].required = false
        this.rules.goodsServerPrice[1].required = false
        let data = this.businessIdOptions.filter((e) => {
          return val == e.businessId
        })[0]
        this.formData.goodsServerName = data.couponName
        this.formData.goodsServerPrice = data.money
      } else {
        this.rules.goodsServerName[0].required = true
        this.rules.goodsServerPrice[0].required = true
        this.rules.goodsServerPrice[1].required = true
      }
    },
    // 获取优惠券列表
    couponBusActivityList(data) {
      couponBusActivityList().then((res) => {
        this.businessIdOptions = res.rows
        this.formData = {
          goodsType: 1,
          businessId: null,
          businessName: null,
          goodsServerName: '',
          goodsServerPrice: null,
          goodsServerNumber: null,
          goodsServerDescribe: null,
        }
        if (data.type !== null) {
          this.index = data.type
          this.formData = data.row
          this.businessIdChange(this.formData.businessId)
        } else {
          this.index = null
        }
      })
    },
    submitForm() {
      this.$refs['elForm_goods'].validate((valid) => {
        if (!valid) {
          return false
        } else {
          // TODO 提交表单
          this.$emit('submit', { index: this.index, row: this.formData })
          this.isShowAddGoods = false
        }
      })
    },
    resetForm() {
      this.$nextTick(() => {
        this.$refs.elForm_goods.resetFields()
      })
    },
    show(data) {
      this.isShowAddGoods = true
      this.resetForm()
      this.couponBusActivityList(data)
    },
    // 取消按钮
    cancel() {
      this.isShowAddGoods = false
      this.resetForm()
      this.$emit('close')
    },
  },
}
</script>
